<template>
    <HeaderBar :title="$t('coupons.title')" :type="type" @toBack="toBack" />
    <view class="tab-panel">
        <wd-tabs v-model="active" @change="handleChange" auto-line-width>
            <block v-for="item in tabsList" :key="item.id">
                <wd-tab :title="`${item.name}`" :name="item.id"></wd-tab>
            </block>
        </wd-tabs>
    </view>
    <view class="coupons-container">
        <view class="list" v-if="couponsList.length">
            <view
                :class="['item', item.state === 0 && 'on']"
                v-for="(item, index) in couponsList"
                :key="index"
                @click="onCoupons(item)"
            >
                <view class="left">{{$t('coupons.vouchers')}}</view>
                <view class="right">
                    <view class="title">
                        <view class="content">{{$t('coupons.newUser')}} {{ item.addedRate * 100 }}% {{$t('coupons.title')}}</view>
                        <view class="text">
                            <text v-if="item.state === 0">{{$t('coupons.unused')}}</text>
                            <text v-else>{{$t('coupons.minimum')}}</text>
                            <text v-if="isExpired(formatDate(item.expiresTime))">{{$t('coupons.alreadyExpire')}}</text>
                        </view>
                    </view>
                    <view class="name">{{$t('coupons.used')}} ${{ item.usageAmount }}</view>
                    <view class="time">{{formatDate(item.expiresTime)}} {{$t('coupons.expired')}}</view>
                </view>
            </view>
        </view>
        <Empty v-if="couponsList.length === 0 && loading" />
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import HeaderBar from '@/components/HeaderBar';
import Empty from '@/components/Empty/index.vue';
import { toLang } from '@/utils/lang';
import { formatDate,isExpired } from '@/utils/date';
import { showToast, NavigateTo } from '@/utils/common';
import { getCouponList } from '@/api/coupons';

const emits = defineEmits(['onClose']);

const props = defineProps({
    type: {
        type: String,
        default: ''
    }
});

const type = ref<string>(props.type);
const loading = ref<boolean>(false);

const active = ref<string>('');

const tabsList = ref([
    {
        id: '',
        name: toLang('coupons.all')
    },
    {
        id: '0',
        name: toLang('coupons.unused')
    },
    {
        id: '1',
        name: toLang('coupons.used')
    }
]);

const couponsList = ref([]);

onLoad(async () => {
    const res = await getCouponList({ state: active.value });
    loading.value = true;
    if (res.code !== 200) {
        return;
    }
    couponsList.value = res.data || [];
});

//初始化加载
const getLoad = async () => {
    const res = await getCouponList({ state: active.value });
    loading.value = true;
    if (res.code !== 200) {
        return;
    }
    couponsList.value = res.data || [];
};

//点击优惠劵
const onCoupons = (row: any) => {
    if (type.value === 'pay') {
        emits('onClose', row);
        return;
    }
};

//右上角返回
const toBack = () => {
    emits('onClose', false);
};

//切换tab
const handleChange = (e: any) => {
    active.value = e.name;
    loading.value = false;
    getLoad();
};
</script>

<style scoped lang="scss">
page {
    background: #fff;
}
.tab-panel {
    position: fixed;
    width: 100%;
    height: 100rpx;
    left: 0;
    top: 98rpx;
    background: #fff;
    z-index: 9;
}
.coupons-container {
    margin-top: 200rpx;
    padding: 10rpx 60rpx 60rpx;
    .list {
        .item {
            display: flex;
            align-items: center;
            height: 260rpx;
            margin-top: 30rpx;
            .left {
                width: 250rpx;
                height: 100%;
                background: #adadad;
                border-radius: 40rpx 0 0 40rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text-align: center;
                color: #fff;
                font-weight: 600;
                font-size: 35rpx;
                padding: 0;
                box-sizing: border-box;
                white-space: pre-wrap;
                position: relative;
                &:before {
                    content: '';
                    position: absolute;
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    left: -25rpx;
                    top: 80rpx;
                    z-index: 1;
                    background: #fff;
                }
                &:after {
                    content: '';
                    position: absolute;
                    width: 50rpx;
                    height: 16rpx;
                    border-radius: 20rpx;
                    background: #fff;
                    bottom: -2rpx;
                    left: 50%;
                    margin-left: -25rpx;
                }
            }
            .right {
                flex: 1;
                height: 100%;
                background: #edf5fe;
                border-radius: 0 40rpx 40rpx 0;
                position: relative;
                padding: 40rpx;
                box-sizing: border-box;
                &:before {
                    content: '';
                    position: absolute;
                    width: 50rpx;
                    height: 50rpx;
                    border-radius: 50%;
                    right: -25rpx;
                    top: 80rpx;
                    z-index: 1;
                    background: #fff;
                }
                .title {
                    display: flex;
                    align-items: center;
                    color: #8e8e8e;
                    .content {
                        width: 60%;
                        font-size: 30rpx;
                        font-weight: 600;
                        white-space: pre-wrap;
                    }
                    .text {
                        width: 40%;
                        font-size: 16rpx;
                        display: flex;
                        justify-content: flex-end;
                    }
                }
                .name {
                    font-size: 24rpx;
                    color: #8e8e8e;
                    margin-top: 2rpx;
                }
                .time {
                    margin-top: 6rpx;
                    font-size: 20rpx;
                    color: rgba(0, 0, 0, 0.3);
                }
            }
        }
    }
    .on {
        .left {
            background: #0866ff !important;
        }
        .right {
            .title,
            .name {
                color: #000 !important;
            }
            .text {
                color: #0866ff !important;
                font-size: 22rpx !important;
            }
        }
    }
}
</style>
